import { Meta, Status, Story } from '../../../../../.storybook/components';
import * as Stories from './Grid/Grid.stories';

<Meta of={Stories} />

# Grid

<Status variant="legacy">
  Use the native [CSS
  Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
  instead.
</Status>

## Dependencies

The grid components depend on [Emotion.js](https://github.com/emotion-js/emotion) which isn't included in Circuit UI. Install it manually before using the components:

```bash
# npm
npm install @emotion/react@^11 @emotion/styled@^11
# yarn v1
yarn add @emotion/react@^11 @emotion/styled@^11
```

The grid components depend on the legacy JSON theme. Wrap the components or your entire application in the `ThemeProvider` from Emotion.js:

```tsx
import { ThemeProvider } from '@emotion/react';
import { light } from '@sumup-oss/design-tokens';
import { Grid, Row, Column } from '@sumup-oss/circuit-ui/legacy';

export default function App() {
  return (
    <ThemeProvider theme={light}>
      <Grid>
        <Row>
          <Column></Column>
        </Row>
      </Grid>
    </ThemeProvider>
  );
}
```

## Static columns

Sometimes you need the same type of grid behavior on all viewports. For that
scenario, you can use the normal `span` attribute of the grid.

<Story of={Stories.StaticColumns} />

## Responsive columns

You can use the following [breakpoints](Features/Theme/Docs) to define the
responsive behavior of your grid:

- `untilKilo`
- `kilo`
- `mega`
- `giga`
- `tera`

<Story of={Stories.ResponsiveColumns} />

Default refers to the smallest viewpoint.

## Skipping columns

Sometimes you want to skip a column. For that, you can use the `skip` prop on
the `Col` component.

<Story of={Stories.SkippingColumns} />

## Responsive skipping

<Story of={Stories.ResponsiveSkipping} />
